<template>
	<view class="goodsDetail">
		<!-- 商品标题 -->
		<view class="header">
			<!-- <view style="font-weight: 400">{{ goodsDetail.simpleDesc }}</view> -->
			{{ goodsDetail.simpleDesc }}
			<view class="cartPic" @click="goToCart()">
				<image src="../../static/images/cart.png" mode=""></image>
			</view>
		</view>

		<!-- 商品内容 -->
		<scroll-view class="detailScroll" scroll-y="true">
			<image :src="goodsDetail.listPicUrl" mode=""></image>
			<view class="categortName">{{ goodsDetail.promTag }}</view>
			<view class="goodsPrice">￥{{ goodsDetail.retailPrice }}</view>
		</scroll-view>

		<!-- 页面底部 -->
		<view class="footer">
			<view class="kefu">
				<i class="iconfont icon-kefu"></i>
			</view>
			<view class="buy" @click="purchase()">立即购买</view>
			<view class="buy cart" @click="joinCart()">加入购物车</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	name: 'detail',
	data() {
		return {
			goodsDetail: {}
		};
	},
	onLoad(options) {
		console.log(JSON.parse(options.obj));
		this.goodsDetail = JSON.parse(options.obj);
	},
	methods: {
		...mapMutations('cart', ['addGoodsMutations']),

		goToCart() {
			wx.switchTab({
				url: '/pages/cart/cart'
			});
		},

		purchase() {
			wx.getStorage({
				key: 'userInfo',
				success: (res) => {
					if (res.data === '') {
						wx.showModal({
							title: '提示',
							content: '请先进行登录',
							success(res) {
								if (res.confirm) {
									// console.log('用户点击确定');
									wx.switchTab({
										url: '/pages/mine/mine'
									});
								} else if (res.cancel) {
								}
							}
						});
					}
				},
				fail: (err) => {
					wx.showModal({
						title: '提示',
						content: '请先进行登录',
						success(res) {
							if (res.confirm) {
								wx.switchTab({
									url: '/pages/mine/mine'
								});
							} else if (res.cancel) {
							}
						}
					});
				}
			});
		},

		joinCart() {
			wx.getStorage({
				key: 'userInfo',
				success: (res) => {
					if (res.data === '') {
						wx.showModal({
							title: '提示',
							content: '请先进行登录',
							success(res) {
								if (res.confirm) {
									// console.log('用户点击确定');
									wx.switchTab({
										url: '/pages/mine/mine'
									});
								} else if (res.cancel) {
								}
							}
						});
					} else {
						this.addGoodsMutations(this.goodsDetail);
					}
				},
				fail: (err) => {
					wx.showModal({
						title: '提示',
						content: '请先进行登录',
						success(res) {
							if (res.confirm) {
								wx.switchTab({
									url: '/pages/mine/mine'
								});
							} else if (res.cancel) {
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="stylus">
@import "../../static/tuBiaoStyle/keFu.css";
.goodsDetail
	.header
		position relative
		// display flex
		// align-items: center
		// justify-content: space-between
		width 95%
		height 90rpx
		margin 0 auto
		text-align: center
		line-height: 90rpx
		.cartPic
			position absolute
			right 0
			top 16rpx
			width 60rpx
			height 60rpx
			image
				width 100%
				height 100%
	.detailScroll
		height calc(100vh - 90rpx)
		image
			height 750rpx
			width 100%
		.categortName
			width 90%
			height 100rpx
			background-color #bb2c08
			border-radius 10rpx
			line-height 100rpx
			text-align center
			color #fff
			font-size 32rpx
			margin 10rpx auto
		.goodsPrice
			    color #bb2c08
			    font-size 45rpx
			    margin 30rpx
	.footer
		// width 100%
		height 100rpx
		display flex
		position fixed
		bottom 0
		left 0
		right 0
		border-top 1px solid #ccc
		line-height 100rpx
		.kefu
			flex 1
			height 100rpx
			display flex
			justify-content center
			align-items center
			// image
			// 	width 50%
			// 	height 50%
		.buy
			flex 2
			border-left 1px solid #ccc
			text-align center
		.cart
			background-color #BB2c08
</style>
